import React from 'react';
import { connect } from 'react-redux';
import actions from '../../store/actions/todo';
@connect(
    state => state.todo,
    actions
)
class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: []
        };
    }
    static getDerivedStateFromProps(props, state) {
        return {
            todos: props.todos
        };
        //根据props和state计算出预期的状态改变，返回结果会被送给setState
    }
    todoChange = event => {
        this.props.toggleComplete(event.target.value);
    };
    delClick = event => {
        console.log(event.target);
        this.props.delTodo(event.target.dataset.id);
    };
    //按diplay条件过滤数据
    filterDisplay() {
        return this.props.todos.filter(item => {
            switch (this.props.display) {
                case 'completed':
                    return item.isComplete;
                case 'uncompleted':
                    return !item.isComplete;
                case 'all':
                default:
                    return true;
            }
        });
    }
    getTodos() {
        return this.filterDisplay().map((todo, index) => {
            return (
                <li key={index}>
                    <input
                        type="checkbox"
                        value={todo.id}
                        checked={todo.isComplete}
                        onChange={this.todoChange}
                    />
                    {todo.isComplete ? (
                        <del>{todo.title}</del>
                    ) : (
                        <span>{todo.title}</span>
                    )}
                    <button
                        type="danger"
                        data-id={todo.id}
                        onClick={this.delClick}>
                        删除
                    </button>
                </li>
            );
        });
    }
    render() {
        return (
            <div>
                <ul>{this.getTodos()}</ul>
            </div>
        );
    }
}
export default TodoList;
